<template>
  <div>
    <van-pull-refresh v-model="refreshing"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :finished="finished"
                :finished-text="card_list_transcript.length === 0?'未搜索到相关信息':'--我是有底线的--'"
                :offset="0"
                @load="onLoad"
                class="fx fx-wrap fx-between fx-items-center"
                style="padding:0rem 0.338164rem">
        <div class="like-card"
             :style=" { 'pointer-events' : text ? 'none' : 'auto' }"
             v-for="(item, index) in card_list_transcript"
             :key="index"
             @click="goScenicSpotDetail(item.id,item.town_id,item.tenant_id)">
          <img :src="item.img_arr"
               class="card-img" />
          <div class="card-content">
            <div class="card-content-title display-txt">
              {{ item.name }}
            </div>
            <div class="fx fx-items-center "
                 style="overflow: hidden; min-height: 0.724638rem;">
              <div v-for="(item1,index1) in item.label_arr"
                   :key="index1">
                <div class="card-content-label"
                     v-if="index1 <= 1">
                  {{item1.name}}

                </div>
              </div>
            </div>
            <div class="card-content-introduce display-txt-two">
              {{item.intro}}
            </div>
          </div>
        </div>
        <div style="height:100px" v-if="card_list_transcript.length === 0">

        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import momenyTitle from '@/components/momenyTitle';
import { Toast } from 'vant';
import cookie from '@/utils/cookie';
export default {
	name: 'TourGuide',
	components: {
		momenyTitle,
	},
	props: {
		text: String,
		searchWord: {
			type: String,
			default: '',
		},
		isSearch: {
			//搜索钩子
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			loading: false,
			finished: false,
			refreshing: false,
			card_list_transcript: [], //card_list副本
			page: 1,
			last_page: 1,
			isSearch_cache: false,
			town_id: '', //乡镇id
		};
	},
	//监听
	watch: {
		searchWord: {
			handler(val) {
				if (val.length > 0 && this.isSearch_cache) {
					this.searchFn();
				}
			},
			immediate: true,
		},
	},
	mounted() {
		this.loading = true;
		this.town_id = cookie.get('town_id');
		this.isSearch_cache = this.isSearch; //重新定义一次 只调用一次
		if (!this.isSearch_cache) {
			_api
				.api_userPortal_tourScenic_getListByCon({
					town_id: this.town_id,
					search_word: this.searchWord,
					level: 'label',
					page: 1,
				})
				.then((res) => {
					this.card_list_transcript = res.data.data;
                    this.card_list_transcript.map((item) => {
                        item.label_arr = item.label_arr.reverse()
                    })
					this.last_page = res.data.last_page;
					this.loading = false;
					this.isSearch_cache = false;
				})
				.catch((err) => {});
		}
	},
	methods: {

		searchFn() {
			this.page = 1;
			_api
				.api_userPortal_tourScenic_getListByCon({town_id: this.town_id,search_word: this.searchWord, level: 'label', page: 1 })
				.then((res) => {
					this.card_list_transcript = res.data.data;
					this.last_page = res.data.last_page;
					this.loading = false;
					this.isSearch_cache = false;
				})
				.catch((err) => {});
		},
		onLoad() {
			if (this.last_page > this.page) {
				this.page++;
				_api
					.api_userPortal_tourScenic_getListByCon({ town_id: this.town_id,search_word: '', level: 'label', page: this.page })
					.then((res) => {
						this.card_list_transcript = this.card_list_transcript.concat(res.data.data);
					})
					.catch((err) => {});
			} else {
				this.finished = true;
			}
		},
		onRefresh() {
			_api
				.api_userPortal_tourScenic_getListByCon({ town_id: this.town_id,search_word: '', level: 'label', page: 1 })
				.then((res) => {
					this.card_list_transcript = res.data.data;
					this.refreshing = false;
					Toast('刷新成功');
				})
				.catch((err) => {});
		},
		goScenicSpotDetail(id, town_id, tenant_id) {
			this.$router.push({
				path: '/scenicSpotMap',
				query: { tour_scenic_id: id, town_id: town_id, tenant_id: tenant_id },
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.like-card {
	display: flex;
	flex-direction: column;
	width: 4.468599rem;
	box-sizing: border-box;
	background-color: #ffffff;
	box-shadow: 0rem 0.096618rem 0.193237rem 0rem rgba(0, 0, 0, 0.08);
	border-radius: 0.096618rem;
	margin-top: 0.338164rem;
	.card-img {
		width: 100%;
		height: 3.091787rem;
		border-radius: 0.096618rem 0.096618rem 0rem 0rem;
		object-fit: cover;
	}

	.card-content {
		flex-direction: column;
		padding: 0.241546rem 0.193237rem;
		.card-content-title {
			font-size: 0.483092rem;
			font-weight: 700;
			color: #06121e;
		}
		.card-content-label {
			padding: 0.048309rem 0.193237rem;
			font-size: 0.2657rem;
			border: 1px solid #2e75ff;
			color: #2e75ff;
			border-radius: 0.2657rem;
			margin-right: 0.144928rem;
			margin-top: 0.193237rem;
			white-space: nowrap;
		}
		.card-content-introduce {
			color: #8c9198;
			font-weight: 400;
			font-size: 0.338164rem;
			margin-top: 0.193237rem;
			min-height: 0.966184rem;
		}
	}
}
::v-deep .van-list__finished-text {
	text-align: center;
	width: 100%;
}
</style>
